<template>
    <div class="container" v-if="showAll">
      <div class="top">
        <div class="content">
          <div class="icons">S</div>
          <div class="tits" style="margin-top: 20px;">
            <span>当前账户积分余额:</span>
            <span class="balance " style="color: green;margin-top: 10px;text-align: center">￥{{ userInfo?.userPoint | yuan }}</span>
          </div>
        </div>
      </div>
    </div></template>
  <script>
  import { getBalance, withdrawalReview,getInfo } from '@/api/user'
import { getToken } from '@/utils/auth';
  
  export default {
    name: 'Balance',
    computed: {
    },
    props:['userInfo'],
    data() {
      return {
        showAll:true,
        nowBalbance: 0,
        withdrawalAmount: 0,
        rechargeList: ['50.00', '100.00', '500.00', '1000.00'],
        rechargeCount: '',
        wthdrawalCount: '',
        show: '',
        setWthdrawals: false,
        showRecharge: false,
        selectIndex: 0,
        showWthdrawal: false,
        ispay: false,
      }
    },
    async created() {
      // this.$toast.loading({
      //   message:'加载中',
      //   duration:800
      // })
      // await this.getInfos()
    },
    methods: {
      // async init() {
      //   const res = await getBalance()
      //   if (res.code === 200) {
      //     this.nowBalbance = res.map.amount || 0
      //     if(res.map.withdrawalAmount >= 0 || res.map.withdrawalAmount === null || res.map.withdrawalAmount === undefined){
      //       this.withdrawalAmount = res.map.withdrawalAmount || 0
      //     }else{
      //       this.withdrawalAmount = 0 
      //     }
      //   }
      //   console.log(res)
      // },
      getInfos(){
        getInfo(getToken())
          .then(res => {
            const data = res.map
            if (!data) {
              return this.$toast.fail('获取用户信息失败')
            }
            this.userInfo = data.info
            this.showAll =true
            this.$set(this,'userInfo',data.info)
          })
      },
    }
  }
  </script>
  <style lang='scss' scoped>
  .container{
      margin: 0;
      padding: 0;
  
      .top{
          margin: 0 24px;
          padding-top: 100px;
  
          .content{
              display: flex;
              flex-direction: column;
              align-items: center;
  
              .icons{
                width: 100px;
                height: 100px;
                line-height: 100px;
                border-radius: 50%;
                text-align: center;
                font-size: 60px;
                color: #fff;
                background-color: yellow;
  
              }
              .tits{
                display: flex;
                flex-direction: column;
                font-size: 30px;
                font-weight: bold;
                .balance{
                  color: #ef3939;
                  // margin-left: 30px
                }
              }
  
              .centers{
                display: flex;
                flex-direction: row;
                box-sizing: border-box;
                // padding: 0 40px;
                height: 40px;
                line-height: 40px;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                margin-top: 60px;
                .balances{
                  color: #ef3939;
                  // margin-left: 30px
                }
              }
  
              .btns{
                position: fixed;
                bottom: 400px;
                display: flex;
                align-items: center;
                justify-content: space-evenly;
                .btn{
                  width: 230px;
                  height: 80px;
                  line-height: 80px;
                  border-radius: 20px;
                  text-align: center;
                  margin-top: 150px;
                }
                .chong{
                  color: #ef3939;
                  border: 1px solid #ef3939;
                }
                .ti{
                  color: green;
                  // margin-left: 100px;
                  border: 1px solid green;
                }
              }
  
          }
  
          .selected{
            margin-top: 100px;
            padding: 0 24px;
            margin-bottom: 100px;
            .recharge{
              display: flex;
              flex-direction: column;
              align-items: center;
  
              .list{
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: flex-start;
  
                .btn{
                  margin-top: 20px;
                  margin-left: 40px;
                  width: 190px;
                  height: 80px;
                  line-height: 80px;
                  border: 1px solid #00000080;
                  border-radius: 20px;
                  text-align: center;
                }
                ::v-deep(input){
                    width: 180px !important;
                    line-height: 70px !important;
                    border: none !important;
                    padding: 0 !important;
                    margin: 0;
                    text-align: center;
                  }
                  .inputss{
                    margin-left: 40px;
                  }
                .notFirst{
                  margin-left: 60px
                }
              }
  
              .paybtn{
                width: 230px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                border-radius: 20px;
                color: #ef3939;
                margin-top: 50px;
                border: 1px solid #ef3939;
              }
              .selects{
                color: #ef3939;
                border:1px solid #ef3939 !important;
              }
            }
          }
  
          .wthdrawal{
            margin-top: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .bttn{
              display: flex;
              align-items: center;
  
              .all{
                width: 200px;
                height: 80px;
                line-height: 80px;
                text-align: center;
                border: 1px solid #00000050;
                border-radius: 20px;
              }
              .btn{
                // margin-top: 20px;
                margin-left: 20px;
                width: 190px;
                height: 80px;
                line-height: 80px;
                border: 1px solid #00000080;
                border-radius: 20px;
                text-align: center;
              }
              ::v-deep(input){
                width: 180px !important;
                line-height: 70px !important;
                border: none !important;
                padding: 0 !important;
                margin: 0;
                text-align: center;
              }
              .inputss{
                margin-left: 20px;
              }
            }
            .wthdrawalbtn{
              width: 230px;
              height: 80px;
              line-height: 80px;
              text-align: center;
              border-radius: 20px;
              border: 1px solid green;
              color: green;
              margin-top: 50px;
            }
  
          }
  
          .tips{
            position: fixed;
            bottom: 150px;
            width: 100%;
            text-align: center;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
      }
  
  }
  .selecteds{
    border: 1px solid green !important;
  }
  </style>
  